import React, { useEffect, useState } from 'react'
import style from '../css/test.module.css'    //将css命名为global.css，可以只作用于本js文件
import store from '../redux/store'
import getCinemaList from '../actionCreator/getCinemaList';

export default function Cinemas(props) {
  const [city] = useState(store.getState().CityReducer.city);
  const [cinemaList,setcinemaList] = useState(store.getState().CinemaListReducer.list);
    useEffect(()=>{
        if(store.getState().CinemaListReducer.list.length === 0){    //使用store进行缓存
          store.dispatch(getCinemaList());
        }

        var unsubscribe = store.subscribe(()=>{
          setcinemaList(store.getState().CinemaListReducer.list)
        })
        return ()=>{
          unsubscribe()
        }
    })
  return (
    <div>
      <div style={{display:'flex', justifyContent:'space-between'}}>
        <div onClick={()=>{
          props.history.push(`/city`)
          }}>{city}
        </div>
        <div onClick={()=>{
          props.history.push('/search')
        }}>
          搜索
        </div>
      </div>
      <div className={style.active}>
        {
          cinemaList.map(item =>
            <div key={item.cinemaId}>{item.name}</div>)

        }  
      </div>    {/* 在使用动态css时候，格式如前方代码*/}
    </div>
  )
}

